<template>
  <div class="page-login">
    <v-toolbar class="login-toolbar" dark color="primary">
      <v-spacer></v-spacer>
      <v-toolbar-title>{{ loginTitle }}</v-toolbar-title>
      <v-spacer></v-spacer>
    </v-toolbar>
    <v-container fluid fill-height>
      <v-layout align-center justify-center>
        <v-flex xs12 sm8 md4>
          <v-card>
            <v-card-text>
              <v-form>
                <v-text-field prepend-icon="person" name="login" :label="usernameLabel" v-model="username" type="text"></v-text-field>
                <v-text-field prepend-icon="lock" name="password" :label="passwordLabel" v-model="password" type="password"></v-text-field>
              </v-form>
            </v-card-text>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn class="login-btn" block large color="primary" @click="login">{{ LoginBtnText }}</v-btn>
            </v-card-actions>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

<script>
import { getApiJson } from '@/src/api'
export default {
  metaInfo: {
    title: 'Login'
  },
  data () {
    return {
      loginTitle: '家装宝',
      LoginBtnText: '登录',
      usernameLabel: '用户名',
      passwordLabel: '密码',
      username: '',
      password: ''
    }
  },
  methods: {
    login () {
      const vm = this
      getApiJson('api/Ecp.OnlineUser.apiLogin', {
        loginName: vm.username,
        password: vm.password
      }).then((res) => {
        if (res) {
          if (navigator.credentials) {
            // 使用navigator.credentials.sotre 进行凭证存储
            let cred = new PasswordCredential({
              id: vm.username,
              password: vm.password,
              name: vm.username,
              iconURL: ''
            })
            navigator.credentials.store(cred).then(cred => {
              this.$router.push({
                path: '/mainframe'
              })
            })
          }
        }
      })
    },
    autoLogin () {
      if (navigator.credentials) {
        navigator.credentials.get({
          password: true,
          unmediated: true
        }).then((cred) => {
          this.$router.push({
            path: '/mainframe'
          })
        }).catch((error) => {
          return
        })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.page-login
  position: relative

  .login-toolbar
    position: absolute
    top: 0
    left: 0
    right: 0

  .container
    padding: 0

  .toolbar__title
    margin-left: 0

  .card
    box-shadow: none

  .card__actions
    flex-direction: column
    justify-content: center
    .login-btn
      width: 350px
</style>
